<template>
  <NuxtLayout>
    <Head>
      <Title>搜索</Title>
    </Head>
    <div ref="listRef" class="container app-page-admin my-5 relative app-search">
      <Loading :show="loading" />
      <div class="app-admin-body">
        <div class="app-search-title mb-5">
          <div class="search-title-txt">
            <h1>
              <Icon name="heroicons-solid:search" class="search-icon mr-2" />搜索到 <i>{{ state.total }}</i> 条与 <i>{{ state.queryParams.title }}</i> 相关的文章：
            </h1>
          </div>
        </div>
        <el-row :gutter="30">
          <el-col v-for="item in state.list" :key="item.id" class="app-admins-col" :lg="6" :xs="24" :sm="8">
            <CardItem :data="item" />
          </el-col>
          <ClientOnly>
            <el-col v-if="!state.list.length">
              <el-empty description="暂无数据" :image-size="100" />
            </el-col>
          </ClientOnly>
        </el-row>
      </div>
      <!-- /body -->
      <div class="app-page flex justify-between">
        <div />
        <el-pagination v-model:page-size="limit" background layout="total, prev, pager, next, jumper" :total="state.total" @current-change="onCurrentChange" />
      </div>
      <!-- /page -->
    </div>
  </NuxtLayout>
</template>
<script setup lang="ts">
import { set } from '@vueuse/core'
import { BasePagination } from '~~/config'

const route = useRoute()
const { page, limit } = BasePagination
const state = reactive<any>({
  // 列表数据
  list: [] as any,
  // 后台语言列表
  backendList: [] as any,
  // 标签列表
  tagList: [] as Article.TagItem[],
  // 总页数
  total: 0,
  // 查询对象
  queryParams: {
    version: 3,
    navId: 1,
    title: '',
    page,
    limit,
  },
})
state.queryParams.title = route.params?.keyword || ''
state.queryParams.navId = useNavId()

const loading = ref(true)
// 获取列表
const getList = async () => {
  set(loading, true)

  const { data }: any = await useAsyncData('use_ArticleData', () => useArticleData(state.queryParams))
  state.list = data.value.rows
  state.total = data.value.page.total

  setTimeout(() => {
    set(loading, false)
  }, 200)
}

getList()

// 处理翻页
const onCurrentChange = (page: number) => {
  state.queryParams.page = page

  getList()
}
</script>
